<template>
    <div>
        <mainTitle :name="title"></mainTitle>
        <el-table :data="tableData5" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="所属店铺">
                            <span>{{ props.row.shop }}</span>
                        </el-form-item>
                        <el-form-item label="商品 ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="店铺 ID">
                            <span>{{ props.row.shopId }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="店铺地址">
                            <span>{{ props.row.address }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述">
                            <span>{{ props.row.desc }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="商品 ID" prop="id">
            </el-table-column>
            <el-table-column label="商品名称" prop="name">
            </el-table-column>
            <el-table-column label="描述" prop="desc">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import mainTitle from '../../components/MainTitle.vue'
export default {
    name: 'commodityList',
    components: {
        mainTitle
    },
    data() {
        return {
            title: '商品信息',
            tableData5: []
        }
    },
    mounted() {
        this.$axios.get('http://localhost:8080/api/allcommodity').then(res => {
            console.log(res.data)
            res.data.forEach(item => {
                this.tableData5.push(item)
            });
        }, err => {
            Message.error('初始化加载失败！！！')
        })
    }
}
</script>

<style lang="less" scoped>

</style>
